<!DOCTYPE html> <!-- -*- html -*- -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>Scalar multiplication</title>
  <link rel="shortcut icon" href="img/gatech.gif"/>

  
      <link rel="stylesheet" href="css/demo.css?vers=2759ff">
  

  <style>
      
  </style>

</head>
<body>
    

    
        <script src="js/demo.js?vers=77646a"></script>
    

    <script type="text/javascript">
        "use strict";
        DomReady.ready(function() {

        window.demo = new Demo({
  mathbox: {
    mathbox: {
      warmup: 10,
      splash: false,
      inspect: false
    }
  },
  camera: {
    position: [-1.5, -3, 1.5]
  }
}, function() {
  var color1, color2, gui, params, update, vector1, vector2, view;
  window.mathbox = this.mathbox;
  view = this.view({
    axes: false
  });
  vector1 = [3, -5, 4];
  vector2 = [3 * 1.5, -5 * 1.5, 4 * 1.5];
  color1 = new Color("green");
  color2 = new Color("red");
  this.labeledVectors(view, {
    vectors: [vector1],
    colors: [color1],
    labels: ['v'],
    vectorOpts: {
      width: 10
    }
  });
  this.labeledVectors(view, {
    vectors: [vector2],
    colors: [color2],
    labels: ['v'],
    zeroPoints: true,
    name: 'scaled'
  });
  mathbox.select("#scaled-text").set('live', true);
  mathbox.select("#scaled-text").bind('data', function() {
    return [params.c.toFixed(2) + 'v'];
  });
  this.draggable(view, {
    points: [vector1],
    onDrag: function(vec) {
      vec.clampScalar(-10, 10);
      vector2[0] = vector1[0] * params.c;
      vector2[1] = vector1[1] * params.c;
      vector2[2] = vector1[2] * params.c;
      return update();
    }
  });
  params = {
    c: 1.5
  };
  gui = new dat.GUI();
  gui.add(params, 'c', -10, 10).step(0.1).onChange(function() {
    vector2[0] = vector1[0] * params.c;
    vector2[1] = vector1[1] * params.c;
    vector2[2] = vector1[2] * params.c;
    return update();
  });
  this.caption('<p><span id="vectors-here"></span></p>\n<p>[click and drag the head of v to move it]</p>');
  this.vecElt = document.getElementById("vectors-here");
  update = (function(_this) {
    return function() {
      return katex.render(params.c.toFixed(2) + "\\cdot" + _this.texVector(vector1, {
        color: color1
      }) + "=" + _this.texVector(vector2, {
        color: color2
      }), _this.vecElt);
    };
  })(this);
  return update();
});


        });
    </script>
</body>
</html>

